<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻冰后台首页vbase版本</title>
<link rel="stylesheet" type="text/css" href="../../kuoqi-ui/ui.dev.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://res.kuoqps.com/kuoqi-js/ver1/kq.1.08.js"></script>
<script src="https://res.kuoqps.com/kuoqi-js/plug-in/keycode/kq.keycode.js"></script>
<script src="../../kuoqi-ui/ui.dev.js"></script>
<script src="js/main.js"></script>
</head>

<body>
<!--页面信息-->
<div class="admin-page">
  <header class="page-head"> 
    <!--首页部分的信息-->
    <div class="col-auto admin-headlogo"> <img width="80" height="32" src="./img/logo_400X200.png" /> </div>
    <div class="col-other text-r">
        <a data-id="-2" data-title="异常页面" data-url="./error.html" onClick="showPage(this)" class="btn btn-small btn-white">异常页面</a>
        <a data-id="30" data-title="基础配置" data-url="./init.html" onClick="showPage(this)" class="btn btn-small btn-white mgr-32">更换主题颜色</a>
        <a class="mgr-32"></a>
    </div>
    <div class="col-auto">
    	<a data-id="-1" data-title="个人中心" data-url="./centor.html" onClick="showPage(this)"  class="label label-href label-small label-white">kuoqi</a>
        <a class="label label-href label-small label-white">退出登录</a>
    </div>
    <!--首页部分的信息 end--> 
  </header>
  <div class="page-body">
    <div class="admin-conts">
      <div class="admin-menu">
        <div id="admin-menubar" class="admin-menubar"><i class="icon icon-menu"></i></div>
        <div class="admin-menusbg"></div>
        <ul id="systemMenus" class="admin-menus">
          <li>
          	<a id="home" data-id="0" data-title="首页" data-url="./welcome.html">
            	<i class="icon icon-home"></i><span>首页</span>
            </a>
            </li>
          <li><a><i class="icon icon-home"></i>基础信息</a>
            <ul >
              <li><a data-id="1" data-title="图标管理" data-url="./icon.html"><i class="icon"></i>图标管理</a></li>
              <li><a data-id="2" data-title="表格管理" data-url="./table.html"><i class="icon"></i>表格管理</a></li>
              <li><a data-id="3" data-title="表单管理" data-url="./form.html"><i class="icon"></i>表单管理</a></li>
              <li><a data-id="4" data-title="按钮管理" data-url="./btn.html"><i class="icon"></i>按钮管理</a></li>
              <li><a data-id="5" data-title="分页" data-url="./pager.html"><i class="icon"></i>分页</a></li>
              <li><a data-id="6" data-title="卡片管理" data-url="./card.html"><i class="icon"></i>卡片管理</a></li>
            </ul>
          </li>
          <li><a><i class="icon icon-home"></i>基础页面</a>
            <ul>
              <li><a data-id="20" data-title="列表页面" data-url="./list.html"><i class="icon"></i>列表页面</a></li>
              <li><a data-id="21" data-title="编辑页面" data-url="./edit.html"><i class="icon"></i>编辑页面</a></li>
            </ul>
          </li>
          <li><a><i class="icon icon-home"></i>配置</a>
            <ul>
              <li><a data-id="33" data-title="demo管理" data-url="./demo.html"><i class="icon"></i>demo页面</a></li>
              <li><a data-id="30" data-title="基础配置" data-url="./init.html"><i class="icon"></i>基础配置</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="admin-winbox">
      	<div class="admin-tabs">
        	<div class="admin-tabhead">
            	<ul id="admin-tabhead">
                	 <!--<li class=""><a><span></span><i class="icon icon-add"></i></a></li>-->
                </ul>
                <div class="admin-tabhead-tbar"><a class="label label-href" onClick="reloadPage()"><i class="icon icon-refresh"></i></a></div>
            </div>
            <div id="admin-tabbody" class="admin-tabbody">
            	<!--<iframe class="open" src="./index3.html"></iframe>
                <iframe class="" src="./index2.html"></iframe>-->
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--页面信息 end-->
</body>

<!--tab的整体控制，针对框架有效，子页面不需要这个-->
<!--关于首页的一些信息的初始化-->
<script>
$Q('#admin-menubar').click(function(){
	var act = $Q(this).parent();
	if($Q(act).hasClass('close')){
		$Q(act).removeClass('close');
	}else{
		$Q(act).addClass('close');	
	}
});
</script>
<!--关于菜单及菜单折叠部分-->
<script>
//折叠菜单的部分功能
$Q('#systemMenus').find('ul').each(function(e){
	var h = $Q(this).height();
	$Q(this).css('height',h+"px");
	//增加一个有child的高度
	$Q(this).parents('li').addClass('has-child');
	$Q(this).parents('li').addClass('close');
});
//然后菜单点击
$Q('#systemMenus').find('a').click(function(){
	var li = $Q(this).parents('li');
	if(li.hasClass('close')){
		$Q(this).parents('li').removeClass('close');
		$Q(this).parents('li').siblings().addClass('close');
	}else{
		$Q(this).parents('li').addClass('close');	
	}
	//判断当前菜单是否存在，如果存在则直接打开模块
	showPage(this);//展示一个a标签带定义参数的模板
});
</script>
<script>
//重写按钮功能
var keycode = new $Q.plugIn.keycode();
keycode.searchKey('f5').keydown(function(rs){
	console.log(rs);
	console.log('f5的按钮点击按下');
	alert('111');
	return false;
});
</script>
<script>
//第一个可点击的菜单被点击
$Q('#home').click();
</script>
</html>
